<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>列表控件属性</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <meta name="generator" content="www.leipi.org" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="leipi.style.css">
    <style type="text/css">
		#tbl tr td, #tbl tr th {
			text-align: center !important;
		}
	</style>
    <script type="text/javascript" src="../dialogs/internal.js"></script>
    <script type="text/javascript" src="../third-party/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function createElement(type, name)
{     
    var element = null;     
    try {        
        element = document.createElement('<'+type+' name="'+name+'">');     
    } catch (e) {}   
    if(element==null) {     
        element = document.createElement(type);     
        element.name = name;     
    } 
    return element;
}
</script>
 
</head>
<body>
<div class="content">
    <table class="table table-striped" style="margin-bottom: 5px;">
	    <thead>
	        <tr>
	            <td> 
	                <span>控件名称</span>
	                <span class="label label-important">*</span>
	                <input id="orgname" placeholder="必填项" type="text" class="input-medium" value="列表控件"/>
	            </td>
	            <td>
	               	 <!-- 宽 <input id="orgwidth" type="text" value="100%" class="input-small span1" placeholder="auto"/> % 或 px -->
	            </td>
	        </tr>
	    </thead>
	</table>


            <table class="table table-striped table-bordered" id="tbl">
                <thead>
                    <tr>
                        <th> <span>序号</span> </th>
                        <th> <span>表头</span> </th>
                        <th> <span>宽度（px）</span> </th>
                        <th> <span>默认值</span> </th>
                    </tr>
                </thead>
                <tbody id="tbl1">
                    <tr>
                        <td><span class="badge">1</span></td>
                        <td title="Tab键切换输入框"><input id="item_1" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_1" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_1"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">2</span></td>
                        <td title="Tab键切换输入框"><input id="item_2" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_2" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_2"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">3</span></td>
                        <td title="Tab键切换输入框"><input id="item_3" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_3" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_3"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">4</span></td>
                        <td title="Tab键切换输入框"><input id="item_4" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_4" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_4"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">5</span></td>
                        <td title="Tab键切换输入框"><input id="item_5" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_5" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_5"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">6</span></td>
                        <td title="Tab键切换输入框"><input id="item_6" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_6" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_6"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">7</span></td>
                        <td title="Tab键切换输入框"><input id="item_7" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_7" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_7"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                    <tr>
                        <td><span class="badge">8</span></td>
                        <td title="Tab键切换输入框"><input id="item_8" type="text" class="input-medium"/></td>
                        <td title="Tab键切换输入框"><input id="colwidth_8" type="text" class="input-medium" style="width:50px;"/></td>
                        <td title="Tab键切换输入框"><input id="colvalue_8"  type="text" class="input-medium" style="width:80px;"/></td>
                    </tr>
                </tbody>
            </table>
        <!--div class="alert alert-danger">提示：</div-->
</div>
<script type="text/javascript">
var oNode = null,thePlugins = 'listctrl';
var rows_count = 8;
window.onload = function() {
    // 弹出窗口初始化函数，这里主要是判断是编辑下拉列表还是新增
    if( UE.plugins[thePlugins].editdom ){
        oNode = UE.plugins[thePlugins].editdom;
        $G('orgname').value = oNode.getAttribute('title');
        // $G('orgwidth').value = oNode.getAttribute('orgwidth');
        var gTitle = oNode.getAttribute('orgtitle'),
            gColWidth = oNode.getAttribute('orgcolwidth'),
            gColValue = oNode.getAttribute('orgcolvalue');
        var aTitle = gTitle.split('`'),
            aColWidth = gColWidth ? gColWidth.split('`') : null,
            aColValue = gColValue ? gColValue.split('`') : null;
        for (var i = 0; i < aTitle.length - 1; i++) {
            var sItem = 'item_' + (i + 1),
            	sColWidth = 'colwidth_' + (i + 1),
            	sColValue = 'colvalue_' + (i + 1);
            $G(sItem).value = aTitle[i];
            if (gColWidth) {
            	$G(sColWidth).value = aColWidth[i];
            }
            if (gColValue) {
                $G(sColValue).value = aColValue[i];
            }
        }
    }
	// 自动聚焦到名称上
    $G('orgname').focus();
}
dialog.oncancel = function () {
	if( UE.plugins[thePlugins].editdom ) {
	    delete UE.plugins[thePlugins].editdom;
	}
};
dialog.onok = function (){
    var gName = $G('orgname').value.replace(/\"/g,"&quot;");
    // var gWidth = $G('orgwidth').value;
    if (gName == '') {
        alert('控件名称不能为空');
        $G('orgname').focus();
        return false;
    }
    var gTitle = '',
    	gColWidth = '',
    	gColValue = '',
        nCount = 0;
    for (var i = 1;i <= rows_count; i++) {
        var oItem = $G('item_' + i),
        	oColWidth = $G('colwidth_' + i),
        	oColValue = $G('colvalue_' + i);
        if (oItem.value != '') {
            if (gTitle.indexOf(oItem.value + '`') !== -1) {
                continue;// 重复
            }
            gTitle += oItem.value + '`'; //表头
            gColWidth += oColWidth.value + '`';
            gColValue += oColValue.value + '`';
            nCount++;
        }
    }
    if (nCount == 0) {
        alert('表头不能为空');
        return false;
    } else {
    	// 去掉结尾的`符号
    	gTitle = gTitle.substring(0, gTitle.length - 1);
    	gColWidth = gColWidth.substring(0, gColWidth.length - 1);
    	gColValue = gColValue.substring(0, gColValue.length - 1);
    }
    if	(!oNode) {
        try {
            oNode = createElement('input', 'leipiNewField');
            oNode.setAttribute('leipiPlugins', thePlugins);
            oNode.setAttribute('type', 'text');
            oNode.setAttribute('value', '{列表控件}');
            oNode.setAttribute('readonly', 'readonly');
            oNode.setAttribute('title', gName);
            oNode.setAttribute('orgtitle', gTitle);
            // oNode.setAttribute('orgwidth', gWidth);
            oNode.setAttribute('orgcolwidth', gColWidth);
            oNode.setAttribute('orgcolvalue', gColValue);
            oNode.style.width = '200px';
            /* if (gWidth != '') {
                oNode.style.width = gWidth;
            } */
            editor.execCommand('insertHtml', oNode.outerHTML);
            return true;
        } catch (e) {
            try {
                editor.execCommand('error');
            } catch ( e ) {
                alert('控件异常，请到 [雷劈网] 反馈或寻求帮助！');
            }
            return false;
        }
    } else {
        //修改
        oNode.setAttribute('leipiPlugins', thePlugins);
        oNode.setAttribute('title', gName);
        oNode.setAttribute('orgtitle', gTitle);
        // oNode.setAttribute('orgwidth', gWidth);
        oNode.setAttribute('orgcolwidth', gColWidth);
        oNode.setAttribute('orgcolvalue', gColValue);
        oNode.style.width = '300px';
        /* if (gWidth != '') {
            oNode.style.width = gWidth;
        } else {
            oNode.style.width = '';
        } */
        delete UE.plugins[thePlugins].editdom; //使用后清空这个对象，变回新增模式
    }
};
</script>
</body>
</html>
